<template>
  <tab-bar>

    <!--没有tab-bar-item组件的时候：-->
    <!--<div class="tabbar_item">
      <img src="~assets/img/tabbar/category.svg" alt="">

      <span class="nav_name">分类</span>
    </div>
    <div class="tabbar_item">
      <img src="~assets/img/tabbar/cart.svg" alt="">

      <span class="nav_name">购物车</span>
    </div>
    <div class="tabbar_item">
      <img src="~assets/img/tabbar/profile.svg" alt="">

      <span class="nav_name">我的</span>
    </div>-->

    <tab-bar-item :path="'home'" :activedColor="'blue'">
      <img src="~assets/img/tabbar/home.svg" alt="" slot="tabbar_item_icon">
      <img src="~assets/img/tabbar/home_active.svg" alt="" slot="tabbar_item_icon_active">
      <span class="nav_name" slot="tabbar_item_name">首页</span>
    </tab-bar-item>
    <tab-bar-item :path="'category'">
      <img src="~assets/img/tabbar/category.svg" alt="" slot="tabbar_item_icon">
      <img src="~assets/img/tabbar/category_active.svg" alt="" slot="tabbar_item_icon_active">
      <span class="nav_name" slot="tabbar_item_name">分类</span>
    </tab-bar-item>
    <tab-bar-item :path="'cart'">
      <img src="~assets/img/tabbar/cart.svg" alt="" slot="tabbar_item_icon">
      <img src="~assets/img/tabbar/cart_active.svg" alt="" slot="tabbar_item_icon_active">
      <span class="nav_name" slot="tabbar_item_name">购物车</span>
    </tab-bar-item>
    <tab-bar-item :path="'profile'">
      <img src="~assets/img/tabbar/profile.svg" alt="" slot="tabbar_item_icon">
      <img src="~assets/img/tabbar/profile_active.svg" alt="" slot="tabbar_item_icon_active">
      <span class="nav_name" slot="tabbar_item_name">我的</span>
    </tab-bar-item>
  </tab-bar>
</template>

<script>
  import TabBar from 'components/common/tabbar/TabBar'
  import TabBarItem from 'components/common/tabbar/TabBarItem'
    export default {
        name: "MainTabBar",
      components:{
        TabBar:TabBar,
        TabBarItem:TabBarItem
      }
    }
</script>

<style scoped>

</style>
